import React, { Component, Fragment } from 'react';
import { Provider } from 'react-redux' // 将仓库暴露给下面的所有组件 都可以进行连接使用
import { GlobalStyled } from './style' // 引用全局样式 消除各个浏览器之间的差异
import { BrowserRouter, Route } from 'react-router-dom' // 引入 路由组件 进行页面间的跳转
import { Iconfont } from './statics/iconfont' // 使用iconfont
import Header from './common/header' // 引入公共头部组件
import store from './store' // 引入仓库
import Detail from './pages/detail' // 引入详情页面 和 主页
import Home from './pages/home'

class App extends Component {
  render() {
    return (
      // Fragment 空标签 可用 <> 代替
      <Fragment>
        {/* 应用全局样式 */}
        <GlobalStyled />
        <Iconfont />
        {/* 将仓库暴露给Provider下的所有组件 */}
        <Provider store={store}>
          {/* 引入公共header */}
          <Header />
          {/* 进行路由跳转 */}
          <BrowserRouter>
            <div>
              <Route path='/' exact component={Home}></Route>
              <Route path='/detail' exact component={Detail}></Route>
            </div>
          </BrowserRouter>

        </Provider>

      </Fragment>
    )
  }
}

export default App
